<template>
    <div class="ad-form">
        <div>
<!--            <div v-for="i in 50" :key="i">{{i}}</div>-->
            <el-button type="primary" @click="showDialog=true">我要报名</el-button>
        </div>
        <el-dialog :visible="showDialog" fullscreen @close="showDialog=false">
            <div style="position: relative;overflow: auto">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top"
                         label-width="100px" class="demo-ruleForm">
                    <h3>云南十天九晚精品线路报名</h3>

                    <el-form-item label="姓名" prop="name">
                        <el-input v-model.trim="ruleForm.name"/>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phone">
                        <el-input v-model.trim="ruleForm.phone"/>
                    </el-form-item>
                    <el-form-item label="联系地址" prop="address">
                        <el-input v-model.number="ruleForm.address"/>
                    </el-form-item>
                    <el-form-item label="报名人数" prop="count">
                        <el-input-number :min="1" :max="100" v-model="ruleForm.count"/>
                    </el-form-item>
                    <div class="footer">
                        <el-button type="success" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                </el-form>
            </div>
            <div v-if="success" class="tks">
                <h1>{{' '}}</h1>
                <h1 style="text-align: center;color: #00ca00">提交成功！</h1>
<!--                <h3 style="text-align: center">感谢您的配合</h3>-->
<!--                <h5 style="text-align: center">————宁夏金和田物业</h5>-->
            </div>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                showDialog: false,
                communityList: [],
                ruleForm: {
                    name: '',
                    phone: '',
                    address: '',
                    count: 1
                },
                rules: {
                    community_id: [
                        {required: true, message: '请选择居住小区', trigger: 'blur'},
                    ],

                    room_addr: [
                        {required: true, message: '请输入楼栋单元门号', trigger: 'blur'}
                    ],
                    full_name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    head_id: [
                        {required: true, message: '请上传本人纯底照片', trigger: 'blur'}
                    ]
                },
                fileList: [],
                success: false
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    const loading = this.$loading({
                        lock: true,
                        text: '信息提交中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    if (valid) {
                        this.$api.post('/api-insert-tour_info', this.ruleForm, () => {
                            this.success = true;
                            loading.close()
                        }, () => {
                            loading.close()
                        })
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.fileList = [];
            },
        }
    }
</script>
<style lang="scss">
    .ad-form {
        padding: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: auto;
        position: absolute;

        .el-form {
            padding: 0 10px;
            width: 100%;
            height: 100%;
            background: #f5f5f5;
        }

        .el-form-item {
            text-align: left;
            padding: 10px 15px 20px;
            background: #fefefe;
            border-radius: 10px;

            label {
                padding: 0 10px;
            }

            .el-form-item__error {
                padding-right: 20px;
                right: 0;
                left: auto;
            }
        }

        .el-radio-group {
            label.el-radio {
                display: block;
                padding: 5px 10px;
            }
        }

        .footer {
            text-align: center;
            padding-top: 10px;
            margin-bottom: 30px;

            button {
                width: 100px;
                margin: 0 20px;
            }
        }

        .tks {
            padding: 50px 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f5f5f5;
            z-index: 9999;
        }
    }

    .el-dialog.is-fullscreen {
        background: #f5f5f5;
    }
</style>
